<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"/>
    <script src="../jquery/jquery-3.4.1.min.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="../bootstrap-table/bootstrap-table.css">
    <script src="../bootstrap-table/bootstrap-table.js"></script>
    <script src="../bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <script src="../bootstrap/js/html5shiv.min.js"></script>
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="../toastr/toastr.min.css">
    <script src="../toastr/toastr.min.js"></script>
</head>
<body>
<style>
    ::-webkit-scrollbar {display:none}
</style>
<div style=" width:0px;   height: 0px;  overflow-y: scroll;"></div>
<div class="container-fluid">
    <div class="row" id="tableToolBar">

    </div>

    <div class="row">
        <div class="col-md-6" id="myTable"></div>
    </div>

    <!--    删除模态框-->
    <div class="modal fade" id="myDeleteModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close"
                            data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                       确定预约</h4>
                </div>
                <div class="modal-body" id="deleteDialogMsg">
                    是否确定预约
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary" id="deleteBtn">
                        确定
                    </button>
                </div>
            </div><!-- /.modal-content --></div>
    </div>


</div>
<script>
    var b_id;
    $(document).ready(function() {

        $("#deleteBtn").click(function () {
            $.ajax({
                url:"../book/update",
                type:"get",
                dataType:"json",
                data:{
                    b_id:b_id
                },
                success:function (result) {
                    // alert(JSON.stringify(result));
                    var errorCose=result.errorCode;
                    if(errorCose==0){
                        //模态框隐藏
                        $("#myDeleteModal").modal("hide");
                        inittable();
                        toastr.success(result.status);
                    }
                }
            });
        });
        inittable();
        function inittable() {
            //让bookstraptable销毁
            $("#myTable").bootstrapTable("destroy");
            $("#myTable").bootstrapTable({
                url: "../../book/selectAll",
                method: 'GET', //请求方式（*）
                toolbar: '#tableToolBar',              //工具按钮用哪个容器
                striped: true, //是否显示行间隔色
                cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true, //是否显示分页（*）
                sortable: true, //是否启用排序
                sortOrder: "asc", //排序方式
                sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1, //初始化加载第一页，默认第一页,并记录
                pageSize: 10, //每页的记录行数（*）
                pageList: [10, 20, 50, 100], //可供选择的每页的行数（*）
                search: true, //是否显示表格搜索,模糊查询
                strictSearch: false,//精确查询
                silent : true,// 刷新事件必须设置
                showColumns: true, //是否显示所有的列（选择显示的列）
                showRefresh: true, //是否显示刷新按钮
                minimumCountColumns: 2, //最少允许的列数
                clickToSelect: true, //是否启用点击选中行
                //height: 1000,                      //表格高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "b_id", //每一行的唯一标识，一般为主键列
                showToggle: true, //是否显示详细视图和列表视图的切换按钮
                cardView: false, //是否显示详细视图
                detailView: false, //是否显示父子表
                clickToSelect: true,    //是否启用点击选中行
                columns: [

                    {
                        checkbox: true,

                    },
                    {
                        field: 'b_carbrand',
                        title: '预约品牌',
                        sortable: true,
                        width: 350,
                        align: 'center',
                        valign: 'middle',
                    },
                    {
                        field: 'b_carname',
                        title: '预约型号',
                        sortable: true,
                        width: 350,
                        align: 'center',
                        valign: 'middle',
                    },
                    {
                        field: 'b_time',
                        title: '预约时间',
                        sortable: true,
                        width: 350,
                        align: 'center',
                        valign: 'middle',
                    },
                    {
                        field: 'b_username',
                        title: '预约人姓名',
                        sortable: true,
                        width: 350,
                        align: 'center',
                        valign: 'middle',

                    },
                    {
                        field: 'b_phone',
                        title: '预约人手机号',
                        sortable: true,
                        width: 350,
                        align: 'center',
                        valign: 'middle',

                    },
                    {
                        field: 'u_dealer',
                        title: '预约经销商',
                        sortable: true,
                        width: 350,
                        align: 'center',
                        valign: 'middle',
                    },
                    {
                        field: 'b_time',
                        title: '预约时间',
                        sortable: true,
                        width: 350,
                        align: 'center',
                        valign: 'middle',
                    },
                    {
                        field: 'b_id',
                        title: '预约账户',
                        sortable: true,
                        width: 350,
                        align: 'center',
                        valign: 'middle',
                    },
                    {
                        field: 'u_status',
                        title: '预约状态',
                        sortable: true,
                        width: 350,
                        align: 'center',
                        valign: 'middle',
                    },
                    {
                        title: "操作",
                        width: 400,
                        align: 'center',
                        valign: 'middle',
                        events: operateEvents,
                        //如果要对按钮进行操作，并且需要获取点击的按钮对应的行内的数据，需要加：
                        formatter: function (value, row, index) {
                            return "<button class='btn btn-success btn-sm deleteUser'><i class='fa fa-handshake-o' aria-hidden='true'></i>确定预约</button>" +
                                ""
                        }
                    }

                ],
                //    复选框居中显示
                onLoadSuccess: function () {
                    //复选框的居中样式，自定义一个复选框的CSS样式，代替了BootStrap的默认样式
                    $(".bs-checkbox").css({"text-align": 'center', "vertical-align": "middle"});
                },
            });
        };
    })
    window.operateEvents={
        'click .deleteUser': function (e, value, row, index) {
            b_id=row.b_id;
            $("#deleteDialogMsg").html("是否确定预约")
            $("#myDeleteModal").modal("show");
        },
    }
</script>
</body>
</html>